<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>免费黑体</title>
    <style>
      @font-face {
        font-family: "思源黑体";
        src: url("./dist/SourceHanSansCN-Medium.ttf");
      }

      @font-face {
        font-family: "阿里黑体";
        src: url("./dist/Alibaba-PuHuiTi-Medium.ttf");
      }

      @font-face {
        font-family: "OPPO黑体";
        src: url("./dist/OPPOSans-M.ttf");
      }

      @font-face {
        font-family: "落霞孤鹜";
        src: url("./dist/LXGWWenKai-Regular.ttf");
      }

      @font-face {
        font-family: "MiSans";
        src: url("./dist/MiSans-Regular.ttf");
      }

      .si-yuan {
        font-family: "思源黑体";
      }
      .a-li {
        font-family: "阿里黑体";
      }
      .oppo {
        font-family: "OPPO黑体";
      }
      .lxgw {
        font-family: "落霞孤鹜";
      }
      .mi-sans {
        font-family: "MiSans";
      }
    </style>
  </head>

  <body>
    <h2>默认字体</h2>
    <div>
      <div>这是默认字体</div>
      <div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
      <div>1234567890-=！@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
      <div>空格:--- ---</div>
    </div>

    <h2>思源黑体</h2>
    <div class="si-yuan">
      <div>这是思源黑体</div>
      <div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
      <div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
      <div>空格:--- ---</div>
    </div>

    <h2>阿里黑体</h2>
    <div class="a-li">
      <div>这是阿里黑体</div>
      <div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
      <div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
      <div>空格:--- ---</div>
    </div>

    <h2>OPPO黑体</h2>
    <div class="oppo">
      <div>这是OPPO黑体</div>
      <div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
      <div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
      <div>空格:--- ---</div>
    </div>

    <h2>落霞孤鹜楷体</h2>
    <div class="lxgw">
      <div>这是落霞孤鹜楷体</div>
      <div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
      <div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
      <div>空格:--- ---</div>
    </div>

    <h2>小米字体</h2>
    <div class="mi-sans">
      <div>这是小米 Sans 字体</div>
      <div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
      <div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
      <div>空格:--- ---</div>
    </div>
  </body>
</html>
